<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Geodesic Creator</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<!-- Bootstrap -->
    <link href="../css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="../css/slider.css" rel="stylesheet">
	
	<!-- Make the text boxes smaller -->
	<style>
		input.text-small {width: 1em;}
		input.text-med {width: 3em;}
	</style>
	
	<style>
		h2 {font-size: 100%;}
		h3 {font-size: 50%;}
	</style>
</head>

<body>
	<div class="container">
		<img src="../img/logo.png">
		<h3>Version 0.2.5b</h3>
		<h2>Click on Each section to configure your Geodesic and then click Generate</h2>
		<form name="configure_geodesic">
		<div class="accordion" id="my-accordion" >
			<div class="accordion-group">
				<div class="accordion-heading">
					<a class="accordion-toggle" data-toggle="collapse" data-parent="#my-accordion" href="#collapseOne">
						Section 1 - Base Platonic Solid
					</a>
				</div>
				<div id="collapseOne" class="accordion-body collapse in">
					<div class="accordion-inner">
						<div class="well">	
							<p>Select Base Platonic Solid to make Geodesic from</p>
							<ul>
							<table>
								<tr>
									<td><input type="radio" id="ps4" name="g_platonic_solid" >Tetrahedron</td>
									<td><input type="radio" id="ps8" name="g_platonic_solid" >Octahedron</td>
									<td><input type="radio" id="ps20" name="g_platonic_solid" checked="checked">Icosahedron</td>
								</tr>
								<tr>
									<td><img src="../img/Tetrahedron.png"></td>
									<td><img src="../img/Octahedron.png"></td>
									<td><img src="../img/Icosahedron.png"></td>
								</tr>
							</table>
							</ul>
						</div>
					</div>
				</div>
			  
				<div class="accordion-heading">
					<a class="accordion-toggle" data-toggle="collapse" data-parent="#my-accordion" href="#collapseTwo">
						Section 2 - Geodesic Configuration
					</a>
				</div>
				<div id="collapseTwo" class="accordion-body collapse">
					<div class="accordion-inner">
							<div class="well">
							<p>Select Frequency of Geodesic</p>
							Enter a number between 1 and 10 (the higher the number the smoother the dome as it uses more struts)
							<ul><input type="text" id="g_frequency" class="text-small" value="5"></ul>
							<p>Enter amount of Dome to create (i.e. 1/2 or 5/8)</p>		
							<ul>
								<input type="text" id="g_fraction_num" class="text-small" value="5"> / <input type="text" id="g_fraction_den" class="text-small" value="8">
							</ul>
							<p>Enter radius of the Dome to create </p>
							<ul>
								X:<input type="text" id="g_radius_x" class="text-med" value="200">
								Y:<input type="text" id="g_radius_y" class="text-med" value="300">
								Z:<input type="text" id="g_radius_z" class="text-med" value="200">
							</ul>
							
							<p><input type="checkbox" id="draw_primative_vertex_points"> Draw Geodesic Vertices Points</p>
							<p><input type="checkbox" id="flatten_strut_base" disabled="disabled"> Flatten frame base</p>
							<p><input type="checkbox" id="draw_base_frame" disabled="disabled"> Draw Base frame</p> 
							<table cellpadding=10>
								<ul><tr><td>Frame Height</td><td><input type="text" id="base_frame_height" class="text-med" value="36"></td></tr></ul>
							</table> 
						</div>
					</div>
				</div>
			  
				<div class="accordion-heading">
					<a class="accordion-toggle" data-toggle="collapse" data-parent="#my-accordion" href="#collapseThree">
						Section 3 - Face Configuration
					</a>
				</div>
				<div id="collapseThree" class="accordion-body collapse">
					<div class="accordion-inner">
						<div class="well">

							<p><input type="checkbox" id="draw_faces"> Draw Geodesic Faces</p>
							<ul><table cellpadding=10>
								<tr><td valign="middle">Select Face Material</td><td valign="bottom"><input type="file" disabled id="face_material" accept="skp"></td><td><a href="#" data-toggle="popover" id = "SKMTools1" ></a></td></tr>
								<tr><td valign="middle">Select Face Opacity</td><td valign="top"><input type="text" class="span2" value="" data-slider-min="0" data-slider-max="100" data-slider-step="5" data-slider-value="50" id="slider-face-opacity" ></td></tr>
							</table></ul>
						</div>
					</div>
				</div>
			  
				<div class="accordion-heading">
					<a class="accordion-toggle" data-toggle="collapse" data-parent="#my-accordion" href="#collapseFour">
						Section 4 - Strut Configuration
					</a>
				</div>
				<div id="collapseFour" class="accordion-body collapse">
					<div class="accordion-inner">
						<div class="well">
							<input type="checkbox" id="draw_struts" checked> Draw Struts
							<p>Select strut type</p>
								<ul><table cellpadding=10>
								</table></ul>
									<tr><td valign="middle">Select Strut Material</td><td valign="bottom"><input type="file" disabled id="strut_material" accept="skp"></td><td><a href="#" data-toggle="popover" id = "SKMTools2" ></a></td></tr>

								<p><input type="radio" id="st_rect" name="strut_type" value="rectangular" checked="checked">Rectangular</p>
								<p>Enter dimensions of strut </p>
								<ul>
									<p><input type="text" id="rect_strut_thickness" value="1.5" class="text-med"> x <input type="text" id="rect_strut_depth" value="3.5" class="text-med"></p>
									<p><input type="checkbox" id="draw_rect_frame" > Draw Inner Frame</p>
								</ul><br>
								<p><input type="radio" id="st_cyl" name="strut_type" value="cylindrical">Cylinder</p>
								<input type="hidden" name="strut_type_val" type="text">
								
								<p>Enter radius of strut </p>
								<ul>
									<input type="text" id="cylinder_strut_radius" value="1" class="text-med">
								</ul>
								<p>Enter extension of strut past hub centre</p>
								<ul>
									<input type="text" id="cylinder_strut_extension" value="0" class="text-med">
								</ul>								
								<p>Enter offset of strut end </p>
								<ul>
									<input type="text" id="cylinder_strut_offset" value="0" class="text-med">
								</ul>								
							</ul>
						</div>
					</div>
				</div>
			  
				<div class="accordion-heading">
					<a class="accordion-toggle" data-toggle="collapse" data-parent="#my-accordion" href="#collapseFive">
						Section 5 - Hub Configuration
					</a>
				</div>
				<div id="collapseFive" class="accordion-body collapse">
					<div class="accordion-inner">
						<div class="well">
							<input type="checkbox" id="draw_hubs" checked> Draw Hubs
							<p>Select hub type</p>
							<ul>
								<ul><table cellpadding=10>
									<tr><td valign="middle">Select Hub Material</td><td valign="bottom"><input type="file" disabled id="hub_material" accept="skp"></td><td><a href="#" data-toggle="popover" id = "SKMTools3" ></a></td></tr>
								</table></ul>
								<p><input type="radio" id="ht_cyl" name="hub_type" value="Cylindrical" checked="checked">Cylindrical</p>
								<p><input type="radio" id="ht_sph" name="hub_type" value="Spherical">Sphere</p>
								<p>Enter radius of sphere hub</p>
								<ul>
									<input type="text" id="sphere_radius" value="5" class="text-med">
								</ul>
								<p><input type="radio" id="ht_non" name="hub_type" value="None" >No Hubs</p>
								<input type="hidden" name="hub_type_val" type="text">
							</ul>  
						</a>
					</div>
				</div>
			</div>
		</div>
		<h2>Run times usually up to 30seconds depending on settings</h2>
		<input class="reset" type="button" value="Generate" onclick="validate_form();">
		</form>
	</div>
	<script src="../js/jquery-1.10.2.min.js"></script>
	<script src="../js/bootstrap.min.js"></script>
	<script src="../js/bootstrap-slider.js"></script>
		<!-- Scripts for Validations and Communication with SketchUp -->
	<script language="javascript">
		var face_opacity;
			
		function dataFromSketchup(variable, val) {	
			if (variable == "SKMTools_installed" && val != "1") {
				//Show text so user can see reason why they can't use Materials selectors
				$('#SKMTools1').text('why?');	
				$('#SKMTools2').text('why?');	
				$('#SKMTools3').text('why?');	
			} else {
				//Material Browse Option defaults to disabled unless the library is present
				$('#face_material').removeAttr("disabled"); 
				$('#strut_material').removeAttr("disabled"); 
				$('#hub_material').removeAttr("disabled"); 		   
		   }
		}
		
		function setVar(variable, val) {


			if(variable == "ps4" || variable == "ps8" || variable == "ps20" || variable == "st_rect" || variable == "st_cyl" || variable == "ht_sph" || variable == "ht_cyl" || variable == "ht_non") {
				alert('got a radiobox: ' + variable + ' = ' + document.getElementById(variable).value);
				if (val == 1) {
					document.getElementById(variable).checked = true;	
				} else {
					document.getElementById(variable).checked = false;					
				}
			} else {
				document.getElementById(variable).value = val;
			}

		}
		
		function call_ruby( callback_name, message ) {
			//alert(callback_name + ": " + message);
			window.location = 'skp:' + callback_name + '@' + message
		}

		function isNumber(n) {
		  return !isNaN(parseFloat(n)) && isFinite(n);
		}

		function validate_int(int_var_str, min, max) {
			var v = document.getElementById(int_var_str);
			var int_var = Number(v.value);

			if (!isNaN(int_var)) {
				if (min != max) {
					if (int_var < min || int_var > max) {
						alert("Woah there cowboy. How about making " + int_var_str + " a number between " + min + " and " + max);
						return 1;
					}
				} else {
					if (int_var < min) {
						alert("Woah there cowboy. How about making " + int_var_str + " a number greater than " + min);
						return 1;
					}
				}		
			} else {
				alert(int_var_str + " must be a number! Please correct and try again");
				return 1;
			}
			
			return 0;
		}

		function validate_float(float_var_str, min) {
			var v = document.getElementById(float_var_str);
			var float_var = parseFloat(v.value);
			if (!isNaN(float_var)) {
				if (float_var < min) {
					alert("Woah there cowboy. How about making " + float_var_str + " a number greater than " + min);
					return 1;
				}
			} else {
				alert(float_var_str + " must be a number! Please correct and try again");
				return 1;
			}
			return 0;
		}

		function add_radio_data(field) {
			//Get the field data
			var ps = document.getElementsByName(field);

			for (var i = 0, length = ps.length; i < length; i++) {
				if (ps[i].checked) {
					ps[i].value = "1";
				} else {
					ps[i].value = "0";
				}
			}
		}
			

		function add_checkbox_data(field){
			//get the checkbox value
			thevalue = document.getElementById(field).checked;
			if (thevalue == true) {
				document.getElementById(field).value = true;
				//alert(field + ": " + thevalue);
			} else {
				document.getElementById(field).value = true;
			}
			//send it back to ruby
		
		}
		
		function file_check(field, ext_check) {
			var ext = document.getElementById(field).value;

			if (ext != "") {
				ext = ext.substring(ext.length - 3, ext.length);
				ext = ext.toLowerCase();
				if(ext != ext_check) {
					alert('You selected a .' + ext + ' file; please select a .' + ext_check + ' file instead!');
					return false; 
				} else {
					return true; 
				}
			} else {
				return true;	
			}
		}
		
		//Send a single setting to SU, callbacks will come and get the rest
		function send_setting()
		{
			var size = 0, key;
			var setting, value;
			var vars = "";
			
			for (key in options) {
				size++;
				vars = vars.concat(key);
			}
			if (size > 0) {
				for (key in options) break; // Get the first setting
				value = options[key];
				delete options[key];
				call_ruby(key, value);
			} else {
				//alert("go create");
				call_ruby("create_geodesic", 1);
			}
		}
		
		function validate_form() {
			var error = 0;
			var ret;
			
			add_radio_data('g_platonic_solid');
			add_radio_data('strut_type');
			add_radio_data('hub_type');
			
			add_checkbox_data('draw_struts');
			add_checkbox_data('draw_hubs');
			add_checkbox_data('draw_faces');
			add_checkbox_data('draw_primative_vertex_points');
			add_checkbox_data('draw_base_frame');
			add_checkbox_data('draw_rect_frame');
			add_checkbox_data('flatten_strut_base');
			
			if (validate_int('g_frequency', 1, 10) == 1) error = 1;
			if (validate_int('g_fraction_num', 1, 1) == 1) error = 1;
			if (validate_int('g_fraction_den', 1, 1) == 1) error = 1;

			if (validate_float('g_radius_x', 0) == 1) error = 1;
			if (validate_float('g_radius_y', 0) == 1) error = 1;
			if (validate_float('g_radius_z', 0) == 1) error = 1;
			if (validate_float('rect_strut_thickness', 0) == 1) error = 1;
			if (validate_float('rect_strut_depth', 0) == 1) error = 1;
			if (validate_float('sphere_radius', 0) == 1) error = 1;
			if (validate_float('base_frame_height', 0) == 1) error = 1;
			if (validate_float('cylinder_strut_extension', -Infinity) == 1) error = 1;
			if (validate_float('cylinder_strut_radius', 0) == 1) error = 1;
			if (validate_float('cylinder_strut_offset', -Infinity) == 1) error = 1;

			if(file_check("face_material", "skm") == false) { error = 1; }
			if(file_check("strut_material", "skm") == false) { error = 1; }
			if(file_check("hub_material", "skm") == false) { error = 1; }

			//options["face_opacity"] = face_opacity.getValue();
			//option_map.set(face_opacity, face_opacity.getValue());			

			if (error == 0) {
				call_ruby("create_geodesic", 1);
			}
		}
		
		function disable_strut_type(type) {
			if (type == "cylinderical") {
				alert("cyl");
			}
			if (type == "rectangular") {
				alert("rect");
			}	
		}

		//Used to tell SU that the page is loaded so it can send any extra configuration data
		function init() {
			// quit if this function has already been called
			if (arguments.callee.done) return;

			// flag this function so we don't do the same thing twice
			arguments.callee.done = true;

			call_ruby('DOMContentLoaded', 1);
		};

		/* for Mozilla */
		if (document.addEventListener) {
		document.addEventListener("DOMContentLoaded", init, false);
		}

		/* for Internet Explorer */
		/*@cc_on @*/
		/*@if (@_win32)
		document.write("<script defer src=ie_onload.js><"+"/script>");
		/*@end @*/

		/* for other browsers */
		window.onload = init;
	
	</script>
	<script>
		$(function(){
			//Update Tooltip of the current opacity value
			$('#slider-face-opacity').slider({
			  formater: function(value) {
				return 'Current value: ' + value + '%';
			  }
			});
			//Update a copy of the opacity value so that it can be sent to SketchUp when the Generate button is pressed
			face_opacity = $('#slider-face-opacity').slider().data('slider');
			
			//TODO work out how to consolodate these (they are the same)
			$('#SKMTools1').popover({
				trigger:'click', placement:'right',html:true,title:'SKM Tools Plugin needed to assign Materials',
				content:'Please download and install SKM Tools Plugin from <a href="http://rhin.crai.archi.fr/rld/plugin_details.php?id=792" target="_blank">here</a> and reload SketchUp'
			});
			$('#SKMTools2').popover({
				trigger:'click', placement:'right',html:true,title:'SKM Tools Plugin needed to assign Materials',
				content:'Please download and install SKM Tools Plugin from <a href="http://rhin.crai.archi.fr/rld/plugin_details.php?id=792" target="_blank">here</a> and reload SketchUp'
			});
			$('#SKMTools3').popover({
				trigger:'click', placement:'right',html:true,title:'SKM Tools Plugin needed to assign Materials',
				content:'Please download and install SKM Tools Plugin from <a href="http://rhin.crai.archi.fr/rld/plugin_details.php?id=792" target="_blank">here</a> and reload SketchUp'
			});
		});
		
			
	</script>

 </body>
</html>